<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求详情</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        secondary: '#3b82f6',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.history.back()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary"></i>
                </button>
                <h1 class="text-base font-bold flex-1 text-text-primary">需求详情</h1>
                <button onclick="toggleFavorite()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i id="favorite-icon" class="fa fa-heart text-text-primary"></i>
                </button>
                <button onclick="shareDemand()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-share-alt text-text-primary"></i>
                </button>
            </div>
        </header>
        
        <!-- 需求详情内容 -->
        <main class="pb-24">
            <!-- 需求基本信息 -->
            <div class="card-modern m-4 p-4">
                <div class="flex items-start gap-3 mb-3">
                    <div class="w-14 h-14 rounded-xl gradient-primary flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-envira text-white text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-lg font-medium">种植合作</span>
                            <span class="text-xs px-2 py-1 bg-red-50 text-red-600 rounded-lg font-medium">紧急需求</span>
                        </div>
                        <h1 class="text-lg font-bold text-text-primary mb-2">急需100亩有机蔬菜种植地</h1>
                        <p class="text-sm text-text-secondary mb-3">寻找适合有机蔬菜种植的土地，要求土壤肥沃，灌溉条件良好，交通便利</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-3 py-3 border-t border-gray-100">
                    <div class="text-center">
                        <div class="text-xl font-bold text-accent">20万</div>
                        <div class="text-xs text-text-secondary mt-1">预算</div>
                    </div>
                    <div class="text-center border-l border-r border-gray-100">
                        <div class="text-xl font-bold text-primary">3天内</div>
                        <div class="text-xs text-text-secondary mt-1">需求时效</div>
                    </div>
                    <div class="text-center">
                        <div class="text-xl font-bold text-secondary">328</div>
                        <div class="text-xs text-text-secondary mt-1">浏览量</div>
                    </div>
                </div>
            </div>
            
            <!-- 需求内容详情 -->
            <div class="card-modern m-4 p-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-file-text-o text-primary mr-2"></i>
                    需求内容
                </h2>
                <div class="text-sm text-text-secondary space-y-2 leading-relaxed">
                    <p>因业务扩张需要，现急需寻找适合有机蔬菜种植的农业用地，面积约100亩左右。</p>
                    
                    <p class="font-medium text-text-primary mt-3">具体要求：</p>
                    <ul class="list-disc list-inside space-y-1 ml-2">
                        <li>土地位置：浙江杭州市及周边地区（余杭、临平、萧山优先）</li>
                        <li>土地面积：80-120亩</li>
                        <li>土壤条件：土质肥沃，排水良好，适合有机种植</li>
                        <li>水源条件：灌溉水源充足，水质良好</li>
                        <li>交通条件：距离主干道不超过3公里，方便运输</li>
                        <li>租赁期限：希望能签订5-10年长期租约</li>
                    </ul>
                    
                    <p class="font-medium text-text-primary mt-3">项目说明：</p>
                    <p>我们是一家专注于有机农业的企业，已在行业深耕8年，拥有成熟的有机蔬菜种植技术和完善的销售渠道。此次扩产是为了满足市场不断增长的需求。我们将采用现代化有机种植技术，既保证产量，又保护土地生态环境。</p>
                    
                    <p class="font-medium text-text-primary mt-3">合作方式：</p>
                    <p>1. 支付合理的土地租金<br>
                    2. 可提供土地流转协议范本<br>
                    3. 对符合条件的土地优先考虑<br>
                    4. 可实地考察洽谈具体合作事宜</p>
                    
                    <p class="mt-3 p-3 bg-primary/5 rounded-lg text-sm">
                        <span class="font-medium text-primary">💡 特别说明：</span> 我们诚信经营，欢迎有意向的土地所有者或代理人联系我们。可先电话沟通基本情况，再约定时间实地考察。
                    </p>
                </div>
            </div>
            
            <!-- 需求地区 -->
            <div class="card-modern m-4 p-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-map-marker text-primary mr-2"></i>
                    需求地区
                </h2>
                <p class="text-sm text-text-secondary">浙江杭州市（余杭区、临平区、萧山区、富阳区优先）</p>
            </div>
            
            <!-- 需求预算 -->
            <div class="card-modern m-4 p-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-yen-sign text-primary mr-2"></i>
                    预算范围
                </h2>
                <div class="flex items-center justify-between p-3 bg-accent/5 rounded-xl">
                    <span class="text-sm text-text-secondary">总预算</span>
                    <span class="text-lg font-bold text-accent">20万元</span>
                </div>
                <p class="text-xs text-text-secondary mt-2">
                    <i class="fa fa-info-circle mr-1"></i>
                    具体租金可面议，根据土地实际情况和租赁年限协商确定
                </p>
            </div>
            
            <!-- 发布者信息 -->
            <div class="card-modern m-4 p-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-user-circle text-primary mr-2"></i>
                    联系方式
                </h2>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-neutral rounded-xl">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-user text-text-secondary"></i>
                            <div>
                                <div class="text-xs text-text-secondary">联系人</div>
                                <div class="text-sm font-medium text-text-primary">陈**</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-neutral rounded-xl">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-phone text-text-secondary"></i>
                            <div>
                                <div class="text-xs text-text-secondary">联系电话</div>
                                <div class="text-sm font-medium text-text-primary">188****1234</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-neutral rounded-xl">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-clock-o text-text-secondary"></i>
                            <div>
                                <div class="text-xs text-text-secondary">发布时间</div>
                                <div class="text-sm font-medium text-text-primary">2024年12月10日 10:30</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-3 bg-amber-50 rounded-xl border border-amber-200">
                        <div class="flex items-start gap-2 text-xs text-amber-800">
                            <i class="fa fa-shield mt-0.5"></i>
                            <div>
                                <p class="font-medium mb-1">隐私保护提示</p>
                                <p class="text-amber-600">为保护双方隐私，联系方式已脱敏处理。点击"联系我"按钮并完成微信登录后可查看完整信息。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相似需求推荐 -->
            <div class="m-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-th-large text-primary mr-2"></i>
                    相似需求推荐
                </h2>
                <div class="space-y-3">
                    <div class="card-modern p-3 hover:shadow-lg transition-all cursor-pointer" onclick="window.location.href='demand-detail.html'">
                        <div class="flex gap-3">
                            <div class="w-12 h-12 rounded-xl gradient-secondary flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-truck text-white"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="text-sm font-medium text-text-primary mb-1 truncate">寻找大型收割机服务</h3>
                                <p class="text-xs text-text-secondary mb-1 truncate">约200亩水稻收割</p>
                                <div class="text-sm font-bold text-accent">预算5万</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 底部操作栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 p-4 shadow-xl z-20">
            <div class="flex gap-3">
                <button onclick="window.location.href='../index.html'" class="px-4 py-3 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors">
                    <i class="fa fa-home text-text-secondary"></i>
                </button>
                <button onclick="window.location.href='demand.html'" class="px-4 py-3 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors">
                    <i class="fa fa-list text-text-secondary"></i>
                </button>
                <button onclick="Components.showContactModal('陈**', '188****1234')" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-medium transition-colors shadow-medium flex items-center justify-center gap-2">
                    <i class="fa fa-wechat"></i>
                    联系我
                </button>
            </div>
        </div>
    </div>
    
    
    <script src="../js/common.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 收藏功能
        let isFavorited = false;
        function toggleFavorite() {
            isFavorited = !isFavorited;
            const icon = document.getElementById('favorite-icon');
            if (isFavorited) {
                icon.className = 'fa fa-heart text-danger';
            } else {
                icon.className = 'fa fa-heart text-text-primary';
            }
        }
        
        // 分享功能
        function shareDemand() {
            CommonUtils.showToast('分享功能开发中...', 'info');
        }
    </script>
</body>
</html>

